<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- 响应式布局 -->
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>12306注册</title>
		<link rel="stylesheet" href="resources/layui/css/layui.css">
		<link rel="stylesheet" href="resources/css/reg.css" />
		<script src="resources/js/jquery-3.7.1.min.js"></script>
	</head>
	<body>
		<div>
			<div id="head12306"></div>

			<div class="mian">
				<div class="main_title">
					<ul class="main_title_message">
						<li>
							您现在的位置:
						</li>
						<li>
							<a href="">客运首页</a>
						</li>
						<li>
							>
						</li>
						<li>
							<a href="login">注册</a>
						</li>
					</ul>
				</div>
				<div class="user">
					<ul class="user_title">
						<li>
							账户信息
						</li>
					</ul>
					<div class="user_message">
						<form class="layui-form" action="">
							<div class="layui-form-item">
								<label class="layui-form-label">
									<span class="red">*</span>
									用户名:</label>
								<div class="layui-input-block">
									<input type="text" name="useracc" required lay-verify="required"
										placeholder="用户名设置成功后不可修改" autocomplete="off" class="layui-input">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">
									<span class="red">*</span>
									登录密码:</label>
								<div class="layui-input-block">
									<input type="password" name="userpwd" required lay-verify="required|password"
										placeholder="6-20位字母、数字或符号" autocomplete="off" class="layui-input">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">
									<span class="red">*</span>
									确认密码:</label>
								<div class="layui-input-block">
									<input type="password" name="confirmPassword" required
										lay-verify="required|confirmPassword" placeholder="再次输入您的登录密码"
										autocomplete="off" class="layui-input">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">
									<span class="red">*</span>
									证件类型:</label>
								<div class="layui-input-inline">
									<select name="idType">
										<option value="居民身份证">居民身份证</option>
									</select>
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">
									<span class="red">*</span>
									姓名:</label>
								<div class="layui-input-block">
									<input type="text" name="username" required lay-verify="required"
										placeholder="请输入姓名" autocomplete="off" class="layui-input">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">
									<span class="red">*</span>
									证件号码:</label>
								<div class="layui-input-block">
									<input type="idCardNumber" name="userpapers" required
										lay-verify="required|idCardNumber" placeholder="请输入您的证件号码" autocomplete="off"
										class="layui-input">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label" >
									<span class="red">*</span>
									优惠（待）类型:</label>
								<div class="layui-input-inline">
									<select name="usertype">
										<option value="成人">成人</option>
										<option value="儿童">儿童</option>
										<option value="学生">学生</option>
										<option value="残疾军人">残疾军人</option>
									</select>
								</div>
							</div>
							<div class="layui-form-item" style="margin-top: -30px">
								<label class="layui-form-label">邮箱:</label>
								<div class="layui-input-block">
									<input type="email" name="useremail" placeholder="请正确填写邮箱地址" autocomplete="off"
										class="layui-input">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">
									<span class="red">*</span>
									手机号码:</label>
								<div class="layui-input-inline">
									<select name="userphone">
										<option value="+86">+86 中国</option>
										<option value="+852">+852 中国香港</option>
										<option value="+853">+853 中国澳门</option>
									</select>
								</div>
								<div class="layui-input-block">
									<input type="phone" name="userphone" required lay-verify="required|phone"
										placeholder="请正确填写手机号码,稍后将向该手机号码发送短信验证码" autocomplete="off" class="layui-input">
								</div>
							</div>
							<div class="layui-form-item">
								<div class="layui-input-block">
									<input type="checkbox" name="agreement" title="我已阅读并同意遵守">
									<a href="">《中国铁路客户服务中心网站服务条款》</a>
									<a href="">《隐私权政策》</a>
								</div>
							</div>
							<div class="layui-form-item">
								<div class="layui-input-block">
									<button class="layui-btn layui-btn-normal" lay-submit
										lay-filter="formDemo">下一步</button>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
		<div id="footer" class="food"></div>
		<script src="resources/layui/layui.js"></script>
		<script>
			layui.use(['element', 'form'], function() {
				var element = layui.element;
				var form = layui.form;

				element.init(); //初始化导航组件
				form.render(); //渲染表单

				function loadComponent(id, url) {
					$("#" + id).load(url);
				}
				loadComponent("head12306", "head_12306");
				loadComponent("footer", "footer");

				//自定义验证规则
				form.verify({

					phone: function(value) {
						if (!/^1[3-9]\d{9}$/.test(value)) {
							return '请输入有效的手机号码（11位数字，以1开头，第二位为3-9）';
						}
					},
					password: function(value) {
						if (value.length < 6) {
							return '密码长度不能少于6位';
						}
					},
					confirmPassword: function(value) {
						var password = document.querySelector('input[name="userpwd"]').value;
						if (value !== password) {
							return '两次输入密码不一致';
						}
					},
					idCardNumber: function(value) {
						if (!/^\d{15}(\d{2}[0-9xX])?$/.test(value)) {
							return '请输入有效的证件号码';
						}
					}
				});
				//监听提交
				form.on('submit(formDemo)', function(data) {
					console.log(data.field); // 获取表单数据
					$.ajax({
						url: 'user/reg',
						type: 'post',
						data: {
							userAcc: data.field.useracc,
							userPwd: data.field.userpwd,
							userName: data.field.username,
							userPapers: data.field.userpapers,
							papersType:data.field.idType,
							userType: data.field.usertype,
							userEmail: data.field.useremail,
							userPhone: data.field.userphone,
							

						},
						dataType:'JSON',
						success: function(response) {
							// 处理服务器返回的数据
							console.log(response)
							if (response.code == 200) {

								// 登录成功
								layer.msg('注册成功');


								// 跳转到首页或其他页面
								window.location.href = 'login';
							} else {
								// 登录失败
								layer.msg('注册失败,账号已存在');
							}
						},
						error: function() {
							layer.msg('请求失败，请稍后重试');
						}
					});
					return false; // 阻止表单跳转。如果需要表单跳转，去掉这段即可。
				});
			});
		</script>
	</body>
</html>